
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="角色管理" name="first">
            <el-button type="primary" class="btn" @click="add">+新增角色</el-button>
            <el-table
              :data="tableData"
              style="width: 100%"
              :border="true"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
                align="center"
              />
              <el-table-column
                prop="name"
                label="角色名称"
                width="150"
                align="center"
              />
              <el-table-column
                prop="description"
                label="描述"
                align="center"
              />
              <el-table-column
                label="操作"
                align="center"
                width="300"
              >
                <template slot-scope="scope">
                  <el-button type="success" @click="permission(scope.row.id)">分配权限</el-button>
                  <el-button type="primary" @click="set(scope.row.id)">编辑</el-button>
                  <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="page"
              background
              layout="prev, pager, next,total"
              :total="total"
              :page-size="pagesize"
              @current-change="change"
            />
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />
            <el-form label-width="120px" style="margin-top:50px">

              <el-form-item label="公司名称">
                <el-input v-model="company.name" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="company.companyAddress" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="company.mailbox" disabled style="width:400px" />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="company.remarks" type="textarea" :rows="3" disabled style="width:400px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <Additem v-if="dialogVisible" :id="Id" :dialog-visible.sync="dialogVisible" @upDateRoles="upDateRoles" />
        <el-dialog
          title="分配权限"
          :visible.sync="dialogVisible1"
          width="30%"
          center
        >
          <el-tree
            ref="tree"
            :data="data"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            default-expand-all
            :check-strictly="true"
            :default-checked-keys="permIds"
          />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="ensure">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRoles, delRole } from '@/api/role'
import { getCompany } from '@/api/company'
import { mapGetters } from 'vuex'
import { getPermissions } from '@/api/permission'
import { getRole, assignPrem } from '@/api/role'
import { tranListToTreeData } from '@/utils/index'
import Additem from './components/Additem'
export default {
  components: {
    Additem
  },
  data() {
    return {
      activeName: 'first',
      total: 0,
      pagesize: 2,
      page: 1,
      tableData: [],
      company: {},
      input: '',
      dialogVisible: false,
      Id: '',
      dialogVisible1: false,
      permIds: [],
      data: [],
      defaultProps: {
        label: 'name'
      }
    }
  },
  watch: {
    dialogVisible1(newVue) {
      if (newVue === false) {
        this.data = []
        this.permIds = []
      }
    }
  },
  computed: {
    ...mapGetters(['companyId'])
  },
  created() {
    this.getRoles({ page: 1, pagesize: this.pagesize })
  },
  methods: {
    async getRoles(data) {
      const { rows, total } = await getRoles(data)
      this.total = total
      this.tableData = rows
    },
    async getCompany() {
      const result = await getCompany(this.companyId)
      this.company = result
    },
    change(page) {
      this.page = page
      this.getRoles({ page, pagesize: this.pagesize })
    },
    del(id) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delRole(id)
        if (this.tableData.length === 1 && this.page !== 1) {
          this.page--
        }
        this.change(this.page)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    add() {
      this.Id = ''
      this.dialogVisible = true
    },
    upDateRoles() {
      this.getRoles({ page: this.page, pagesize: this.pagesize })
    },
    set(id) {
      this.Id = id
      this.dialogVisible = true
    },
    handleClick(tab) {
      if (tab.index === '1' && !this.company.name) {
        this.getCompany()
      }
    },
    async permission(id) {
      this.Id = id
      const result = await getPermissions()
      this.data = tranListToTreeData(result, '0')
      const { permIds } = await getRole(id)
      this.permIds = permIds
      this.dialogVisible1 = true
    },
    async ensure() {
      const permIds = this.$refs.tree.getCheckedKeys()
      try {
        await assignPrem({ id: this.Id, permIds: [... permIds] })
        this.$message.success('分配成功')
      } catch (error) {
        this.$message.error('分配失败')
      }
      this.dialogVisible1 = false
    }
  }
}
</script>

<style>
.btn{
  margin-bottom: 1.875rem;
}
.page{
  display:flex;
  justify-content: center;
  margin-top: 1.25rem;
}
</style>

